<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
		<script src="js/vue.js"></script>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<h1>{{address}}</h1>
		<div id="app" v-cloak>
			<h2>{{address}}</h2>
			<input type="text" id="address" v-model="address" />
			
			<p>{{name}}, {{age}}</p>
			<p>{{hobby}}, {{hobby.length}}</p>
			<p>第一个元素: {{hobby[0]}}
			最后一个元素: {{hobby[hobby.length-1]}}</p>
			
			<p>
				<span v-for="o in hobby">{{o}} </span>
			</p>
			<p>
				<span v-for="j,i in hobby">{{i}}-{{j}} </span>
			</p>
			
			<p>{{girl}}</p>
			<p>{{girl.name}} {{girl.age}}</p>
			
			<p v-show="girl.age>=18">成年</p>
			<p v-show="girl.age<18">未成年</p>
			
			<p v-if="girl.age>=18">成年</p>
			<p v-if="girl.age<18">未成年</p>
			
			<p v-if="money>=1900">一线不差钱</p>
			<p v-else-if="money>=1200">二线不差钱</p>
			<p v-else-if="money>=600">三线不差钱</p>
			<p v-else>穷</p>
			
			链接:<a :href="url" target="_blank">百度百科</a>
			<br>按钮: <button onclick="alert('点我有惊喜')">点我</button>
			<br>按钮: <button @click="show">点我2</button>
		</div>
	</body>
</html>
<script>
	var vm = new Vue({
		el: "#app",
		data:{
			name: "Jack",
			address: "Peking",
			age: 22,
			money: 100,
			url: "http://baike.baidu.com",
			hobby: ["red","green","blue"],
			girl: {
				name: "Rose",
				age: 18
			}
		},
		methods: {
			show: function(){
				console.log("vue show func")
			}
		}
	});
</script>